import React ,{useState,useEffect} from 'react'
import {useDispatch,useSelector} from "react-redux"
import * as api from "../../../api/index"
import { Table, Button, Space,Menu, Dropdown ,Input} from 'antd';
import My_pagination from '../../../components/My_pagination';
import My_modal from '../../../components/My_modal';


function Workers() {
    const [flag, setflag] = useState(false)
    const [value, setValue] = useState("")
    const [obj,setobj] = useState({})
    const dispatch = useDispatch()
    useEffect(()=>{
        dispatch(api.get_table())
    },[dispatch])

    const table_data = useSelector((state)=>{
        return state.table_reducer.table_data
    })
    const slice_data = useSelector((state)=>{
        return state.table_reducer.slice_data
    })

    const columns = [
        {
            title: 'Key',
            dataIndex: 'key',
            key: 'key',
        },
        {
          title: 'Name',
          dataIndex: 'name',
          key: 'name',
        },
        {
            title: 'Sex',
            dataIndex: 'sex',
            key: 'sex',
        },
        {
          title: 'Ctiy',
          dataIndex: 'city',
          key: 'city',
        },
        {
            title: '状态 ',
            dataIndex: 'state',
            key: 'state',
        },
        
        {
          title: 'Action',
          key: 'action',
          render: (text, record,index) => (
            <Space size="middle">
              <a onClick={()=>showModal(record,"编辑")}>编辑</a>
              <a onClick={()=>del_data(text, record,index)}>Delete</a>
            </Space>
          ),
        },
    ];
    const menu = (
        <Menu
          items={[
            {
                label: (
                  <Button onClick={()=>{
                      dispatch(api.filter_tableData("全部"))
                  }}>
                    全部
                  </Button>
                ),
            },
            {
              label: (
                <Button onClick={()=>{
                    dispatch(api.filter_tableData("已完成"))
                }}>
                  已完成
                </Button>
              ),
            },
            {
              label: (
                <Button  onClick={()=>{
                    dispatch(api.filter_tableData("未完成"))
                }}>
                  未完成
                </Button>
              ),
            },
            {
              label: (
                <Button  onClick={()=>{
                    dispatch(api.filter_tableData("进行中"))
                }}>
                  进行中
                </Button>
              ),
            },
          ]}
        />
      );
    const del_data = (text, record,index) =>{
        console.log(text, record,index);
        dispatch(api.del_tableData(record))
    }
    const setSlice_data = (page,pageSize) =>{
        console.log(page,pageSize);
        dispatch(api.set_slice_data(page,pageSize))
    }

    const showModal = (record,text) => {
        // console.log(record);
        record.text = text
        setobj(record)
        setflag(true);
    };
    
    const handleOk = () => {
        setflag(false);
    };
    
    const handleCancel = () => {
        setflag(false);
    };

    const low_gigh = () =>{
      dispatch(api.low_high_data())
    }
    
    let my_modal = {
        flag,
        handleCancel,
        handleOk,
        obj
    }

    let my_pagination = {
        table_data,
        setSlice_data
    }
    // console.log(value);
    return (
        <div style={{width:"100%",height:"100%",overflow:"auto"}}>
             <Button onClick={()=>showModal({},"新增")}>新增数据</Button>
             <Button onClick={low_gigh}>从低到高</Button>
             <Button onClick={()=>dispatch(api.gigh_low_data())}>从高到低</Button>
             <Input
                className="my_input" 
                onPressEnter={(e)=>{
                  dispatch(api.seach_data(value))
                }} 
                value={value} 
                maxLength={50}
                onChange={(e)=>{
                  setValue(e.target.value)
                  
              }} 
              placeholder="Basic usage" 
            />
             <Dropdown overlay={menu} placement="bottom" trigger={["click"]}>
                <Button>筛选数据</Button>
            </Dropdown>
            {
                table_data&&  <Table pagination={false} columns={columns} dataSource={slice_data} />
            }
             <My_pagination {...my_pagination}/>
             <My_modal {...my_modal}/>
        </div>
    )
}

export default Workers
